<!DOCTYPE html> 
<html lang="en"> 
<head> 
	<meta http-equiv="content-type" content="text/html; charset=utf-8" /> 
	
	<!-- mobile meta tag -->		
	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">

	<title>Tables and Lists - Sympathique</title> 
	
	<!-- main style -->
	<link rel="stylesheet" type="text/css" href="style.css" media="screen" />
	
	<!-- color scheme -->
	<link rel="stylesheet" type="text/css" href="color-schemes/red/red.css" media="screen" title="red" />
	<link rel="stylesheet" type="text/css" href="color-schemes/yellow/yellow.css" media="screen" title="yellow" />
	<link rel="stylesheet" type="text/css" href="color-schemes/orange/orange.css" media="screen" title="orange" />
	<link rel="stylesheet" type="text/css" href="color-schemes/blue/blue.css" media="screen" title="blue" />
	<link rel="stylesheet" type="text/css" href="color-schemes/green/green.css" media="screen" title="green" />
	<link rel="stylesheet" type="text/css" href="color-schemes/purple/purple.css" media="screen" title="purple" />
	
	<!--miscellaneous-->
	<link rel="stylesheet" type="text/css" href="css/superfish.css" media="screen">
	<link rel="stylesheet" type="text/css" href="css/prettyPhoto.css" media="screen"/>
	<link rel="stylesheet" type="text/css" href="css/font-awesome.css" media="screen"/>
	<link rel="stylesheet" type="text/css" href="css/audioplayer.css" media="screen" />	
	
	<!-- revolution slider settings -->
	<link rel="stylesheet" type="text/css" href="rs-plugin/css/settings.css" media="screen" />		

	<!-- setting mobile environment -->		
	<link rel="stylesheet" type="text/css" href="css/responsive.css" media="screen" />	
	
	<!--[if IE 7]>
	<link rel="stylesheet" type="text/css" href="css/font-awesome-ie7.min.css">
	<![endif]-->
	
	<!--[if lt IE 9]>
	<script src="../../../html5shiv.googlecode.com/svn/trunk/html5.js"></script>
	<![endif]-->

	<script type="text/javascript" src="js/jquery-1.8.3.min.js"></script>
	<script type="text/javascript" src="js/hoverIntent.js"></script>
	<script type="text/javascript" src="js/superfish.js"></script>
	<script type="text/javascript" src="js/jquery.jcarousel.js"></script>
	<script type="text/javascript" src="js/jquery.tweet.js"></script>
	<script type="text/javascript" src="js/jflickrfeed.js"></script>
	<script type="text/javascript" src="js/jquery.prettyPhoto.js"></script>
	<script type="text/javascript" src="js/slides.min.jquery.js"></script>
	<script type="text/javascript" src="js/jquery.mobilemenu.js"></script>
	<script type="text/javascript" src="js/jquery.contact.js"></script>
	<script type="text/javascript" src="js/jquery.preloadify.min.js"></script>
	<script type="text/javascript" src="js/jquery.jplayer.min.js"></script>
	<script type="text/javascript" src="js/jquery.isotope.min.js"></script>
	
	<!-- jQuery Revolution Slider -->
	<script type="text/javascript" src="rs-plugin/js/jquery.themepunch.plugins.min.js"></script>
	<script type="text/javascript" src="rs-plugin/js/jquery.themepunch.revolution.min.js"></script>
	
	<script type="text/javascript" src="js/custom.js"></script>
	
	<link rel="stylesheet" type="text/css" href="template-changer.css" media="screen"/>		
	<script type="text/javascript" src="js/jquery.cookie.js"></script>	
	<script type="text/javascript" src="js/styleswitch.js"></script>	
	
	<!-- Google Web Fonts -->
	<link href='../../../fonts.googleapis.com/css@family=Open+Sans_3A300,400,600,700' rel='stylesheet' type='text/css'>


<script type="text/javascript">
	$(function()
		{
			// Call stylesheet init so that all stylesheet changing functions 
			// will work.
			$.stylesheetInit();
			
			// This code loops through the stylesheets when you click the link with 
			// an ID of "toggler" below.
			$('#toggler').bind(
				'click',
				function(e)
				{
					$.stylesheetToggle();
					return false;
				}
			);
			
			// When one of the styleswitch links is clicked then switch the stylesheet to
			// the one matching the value of that links rel attribute.
			$('.styleswitch').bind(
				'click',
				function(e)
				{
					$.stylesheetSwitch(this.getAttribute('rel'));
					return false;
				}
			);
		}
	);
</script>	
	
</head>
<body>
 

<!-- setting a fullscreen image as background:
<img id="bg" src="images/apple.jpg" alt="apple-background" />
-->


	<div class="theme-changer-wrap">
		<div class="theme-changer">
			<div class="changer-inner">				
				<span> COLOR SCHEME </span>
					<ul id="colors">
						<li><a href="tables-and-lists.html@style=yellow" rel="yellow" class="styleswitch color-yellow">yellow</a></li>
						<li><a href="tables-and-lists.html@style=orange" rel="orange" class="styleswitch color-orange">orange</a></li>
						<li><a href="tables-and-lists.html@style=blue" rel="blue" class="styleswitch color-blue">blue</a></li>
						<li><a href="tables-and-lists.html@style=green" rel="green" class="styleswitch color-green">blue</a></li>
						<li><a href="tables-and-lists.html@style=red" rel="red" class="styleswitch color-red">blue</a></li>
						<li><a href="tables-and-lists.html@style=purple" rel="purple" class="styleswitch color-purple">blue</a></li>
					
					</ul>
					<div style="clear:both; height:10px; width:100%"></div>				
			</div>
		</div>
		<div class="open-close"></div>
	</div> 	
<div id="wrapper">
	<header id="header">
		<div class="centered-wrapper">
			<div class="one-third">
				<div class="logo"><a href="index.html"></a></div>
			</div><!--end one-third-->
			
			<div class="two-third column-last">		
				<nav id="navigation">
					<ul id="mainnav">
						<li><a href="index.html"><span>HOME</span></a>
							<ul>
								<li><a href="index.html">Home Version 1</a></li>
								<li><a href="index-2.html">Home Version 2</a></li>
								<li><a href="index-3.html">Home Version 3</a></li>
								<li><a href="index-4.html">Home Version 4</a></li>
								<li><a href="index-onepage.html">Home One Page</a></li>
							</ul>							
						</li>
						<li><a href="#"><span>PAGES</span></a>
							<ul>
								<li><a href="gallery.html">Gallery</a></li>
								<li><a href="services.html">Services</a></li>
								<li><a href="about-us.html">About Us</a></li>
								<li><a href="pricing.html">Pricing Options</a></li>
								<li><a href="testimonials.html">Testimonials</a></li>
							</ul>
						</li>
						<li><a href="#"><span>FEATURES</span></a>
							<ul>								
								<li><a href="typography.html">Typography</a></li>
								<li><a href="columns.html">Columns</a></li>
								<li><a href="buttons-and-boxes.html">Buttons and Boxes</a></li>
								<li><a href="tabs-and-toggles.html">Tabs and Toggles</a></li>
								<li><a class="current" href="tables-and-lists.html">Tables and Lists</a></li>
								<li><a href="#">3rd Level Nav</a>
									<ul>
										<li><a href="#">this is</a></li>
										<li><a href="#">a third level</a></li>
										<li><a href="#">nav menu</a></li>
									</ul>							
								</li>
							</ul>				
						</li>						
						<li><a href="portfolio-four-columns.html"><span>PORTFOLIO</span></a>
							<ul>
								<li><a href="portfolio-grid.html">Grid Layout</a></li>
								<li><a href="portfolio-four-columns.html">4 Columns</a></li>
								<li><a href="portfolio-three-columns.html">3 Columns</a></li>
								<li><a href="portfolio-two-columns.html">2 Columns</a></li>
								<li><a href="portfolio-single.html">Portfolio Single</a></li>
							</ul>		
						</li>
						<li><a href="blog-masonry-2-columns.html"><span>BLOG</span></a>
							<ul>
								<li><a href="blog-masonry-2-columns.html">Masonry Layout 1</a></li>
								<li><a href="blog-masonry-3-columns.html">Masonry Layout 2</a></li>
								<li><a href="blog.html">Regular Layout</a></li>
								<li><a href="blog-single.html">Blog Post</a></li>
							</ul>
						</li>
						<li><a href="contact.html"><span>CONTACT</span></a>
							<ul>
								<li><a href="contact.html">Contact Layout 1</a></li>
								<li><a href="contact-fullwidth.html">Contact Layout 2</a></li>
							</ul>						
						</li>
					</ul>
				</nav><!--end navigation-->
			</div><!--end two-third-->
		<div class="clear"></div>			
		</div><!--end centered-wrapper-->
	</header>	
			
	<div class="top-shadow"></div>
	
	<section class="page-title">
	<div class="page-background">
		<div class="pattern1"></div>
	</div>
	<div class="bottom-shadow"></div>
		<div class="title-wrapper">
			<div class="title-bg">
				<div class="title-content">
					<div class="two-third">
						<h2>Tables and Lists</h2>
					</div>
					<div class="one-third column-last">		
					</div>
					<div class="clear"></div>
				</div><!--end title-content-->
			</div>
		</div><!--end title-wrapper-->
	</section>	
	
	<div class="centered-wrapper">	

		<h6>PRICING TABLE</h6>

		<div class="space"></div>
		
		<div class="pricing-table">
			<div class="pricing-column first-column">
				<div class="pricing-header">
					<div class="package-title">BASIC</div>
					<div class="package-value">
						<span class="package-currency">$</span>
						<span class="package-price">19</span>
						<span class="package-time">/month</span>
					</div><!--end package-value-->
				</div><!--end pricing-header-->	
				<ul class="package-features">
					<li>24/7 Support</li>
					<li class="alt">Free 10GB Storage</li>
					<li>Documentation & Tutorials</li>
					<li class="alt">Google Apps Sync</li>
					<li>Up to 10 Projects</li>
					<li class="alt">Free Facebook Page</li>
					<li>Up to 3 Users</li>
				</ul><!--end package-features-->
				<div class="signup">
					<a href="#" class="button white">SIGN UP</a> 
				</div>				
			</div><!--end pricing-column-->
			
			<div class="pricing-column featured-column">
				<div class="pricing-header">
					<div class="column-shadow"></div>
					<div class="package-title">ADVANCED</div>
					<div class="package-value">
						<span class="package-currency">$</span>
						<span class="package-price">29</span>
						<span class="package-time">/month</span>
					</div><!--end package-value-->
				</div><!--end pricing-header-->	
				<ul class="package-features">
					<li>24/7 Support</li>
					<li class="alt">Free 30GB Storage</li>
					<li>Documentation & Tutorials</li>
					<li class="alt">Google Apps Sync</li>
					<li>Up to 20 Projects</li>
					<li class="alt">Free Facebook Page</li>
					<li>Up to 5 Users</li>
				</ul><!--end package-features-->
				<div class="signup">
					<a href="#" class="button red">SIGN UP</a> 
				</div>
			</div><!--end pricing-column-->

			<div class="pricing-column">
				<div class="pricing-header">
					<div class="package-title">PROFESSIONAL</div>
					<div class="package-value">
						<span class="package-currency">$</span>
						<span class="package-price">49</span>
						<span class="package-time">/month</span>
					</div><!--end package-value-->
				</div><!--end pricing-header-->	
				<ul class="package-features">
					<li>24/7 Support</li>
					<li class="alt">Unlimited Storage</li>
					<li>Documentation & Tutorials</li>
					<li class="alt">Google Apps Sync</li>
					<li>Up to 50 Projects</li>
					<li class="alt">Free Facebook Page</li>
					<li>Unlimited Users</li>
				</ul><!--end package-features-->
				<div class="signup">
					<a href="#" class="button white">SIGN UP</a> 
				</div>				
			</div><!--end pricing-column-->

			<div class="pricing-column">
				<div class="pricing-header">
					<div class="package-title">ULTIMATE</div>
					<div class="package-value">
						<span class="package-currency">$</span>
						<span class="package-price">99</span>
						<span class="package-time">/month</span>
					</div><!--end package-value-->
				</div><!--end pricing-header-->	
				<ul class="package-features">
					<li>24/7 Support</li>
					<li class="alt">Unlimited Storage</li>
					<li>Documentation & Tutorials</li>
					<li class="alt">Google Apps Sync</li>
					<li>Unlimited Projects</li>
					<li class="alt">Free Facebook Page</li>
					<li>Unlimited Users</li>
				</ul><!--end package-features-->
				<div class="signup">
					<a href="#" class="button white">SIGN UP</a> 
				</div>				
			</div><!--end pricing-column-->
		</div><!--end pricing table-->
		
		<div class="clear"></div>

		<div class="separator"></div>
		
		<h6>LISTS</h6>
		<div class="percent-one-fourth">
			<ul class="customlist tick-list">
				<li>Lorem ipsum</li>
				<li>Consectetur adipisicing</li>
				<li>Ullamco laboris</li>
				<li>Quis nostrud exercitation</li>
			</ul>
		</div>	
		<div class="percent-one-fourth">
			<ul class="customlist arrow-list">
				<li>Lorem ipsum</li>
				<li>Consectetur adipisicing</li>
				<li>Ullamco laboris</li>
				<li>Quis nostrud exercitation</li>
			</ul>
		</div>			
		<div class="percent-one-fourth">
			<ul class="customlist play-list">
				<li>Lorem ipsum</li>
				<li>Consectetur adipisicing</li>
				<li>Ullamco laboris</li>
				<li>Quis nostrud exercitation</li>
			</ul>
		</div>		
		<div class="percent-one-fourth column-last">
			<ul class="customlist star-list">
				<li>Lorem ipsum</li>
				<li>Consectetur adipisicing</li>
				<li>Ullamco laboris</li>
				<li>Quis nostrud exercitation</li>
			</ul>
		</div>						
		
		<div class="clear"></div>
	</div><!--end centered-wrapper-->
	
	<div class="space"></div>
	
	<footer id="footer">
		<div class="centered-wrapper">
			<div id="topfooter">
				<div class="one-half">
					<h3>About Us</h3>
					<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam veritatis et quasi nam liber tempore.</p>
					<div class="footer-logo"></div>
				</div><!--end percent-one-half-->
				<div class="one-half column-last">
					<div class="percent-one-half">
						<h3>We are on Twitter</h3>
						<div class="tweet1"></div>
					</div>
					
					<div class="percent-one-half column-last">
						<h3>Get in Touch with Us</h3>
						<ul>
							<li>Address: 1600 Amphitheatre Parkway, Mountain View, CA 94043</li>
							<li>Phone: +321 123 456 7<br/>
							E-mail: <a href="mailto:">johndoe@ipsum.com</a></li>
						</ul>
					</div><!--end one-half-->					
				</div><!--end one-half-->
			</div><!--end topfooter-->
		</div><!--end centered-wrapper-->
		
		<div id="bottomfooter">		
			<div class="centered-wrapper">		
				<div class="one-half">
					<p>COPYRIGHT &copy; 2013 - SYMPATHIQUE | ALL RIGHTS RESERVED. - Collect from <a href="http://www.cssmoban.com/" title="网页模板" target="_blank">网页模板</a></p>
				</div><!--end one-half-->

				<div class="one-half column-last">
					<ul id="social">
						<li><a class="rss" href="#">RSS Feed</a></li>
						<li><a class="facebook" href="#">Facebook</a></li>
						<li><a class="twitter" href="#">Twitter</a></li>
						<li><a class="flickr" href="#">Flickr</a></li>
						<li><a class="google" href="#">Google</a></li>
						
					<!-- You can add social icons for forrst, dribbble, vimeo, linkedin and skype. Take the ones you need from the list and paste them above
					
						<li><a class="forrst" href="#">Forrst</a></li>
						<li><a class="dribbble" href="#">Dribbble</a></li>
						<li><a class="vimeo" href="#">Vimeo</a></li>
						<li><a class="linkedin" href="#">LinkedIn</a></li>
						<li><a class="skype" href="#">Skype</a></li> 
					-->	
					</ul>					
				</div><!--end one-half-->
			</div><!--end centered-wrapper-->				
		</div><!--end bottomfooter-->
	</footer><!--end footer-->	
	
</div><!--end wrapper-->
</body> 
</html>